	<template>
	<div class="carry">
        <div class="redList">
        	<ul v-for="item in redlist">
        		<li class="active" @click="openDialog(item.sum)"><p>恭喜您</p>获得<br>{{item.sum}}<br>金币</li>
        	</ul>
        </div>
		<bottom-nav></bottom-nav>
	</div>
</template>

<script>
	import bottomNav from './bottomNav'
	import { MessageBox } from 'mint-ui'
	export default {
		name: 'carry',
		data () {
			return {
				redlist:''
			}
		},
		components: {bottomNav},
		mounted () {
		var str = window.location.href ;
	   	var temp = str.charAt(str.length-1);
	   	var userInfo  = JSON.parse(window.localStorage.getItem("userInfo"));
	   	var that      = this;
		this.axios({
				 method:'post',
				 url:"http://xyydj.daoapp.io/mobile/redpacket/list",
				 data:{
					 "openid":userInfo.openid,
					 "spieltag":(parseInt(temp)+1)
				 }
			}).then(function(res){
					console.log(res.data.data)
					that.redlist = res.data.data;
			})
		},
		created() {

		},
		methods: {
			openDialog(sum) {
				MessageBox({
					message: '<p>恭喜您<br>获得'+sum+'金币</p>',
					title: '',
					dialogClass: 'carry2Dialog',
					showCancelButton: true,
					confirmButtonText: '',
					cancelButtonText: ''
				}).then((action) => {
				  console.log('action: ', action);
				});
			}
		}
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.carry{padding-top: 15.8rem;background: url(../assets/img/bg3Top.png) top center no-repeat, url(../assets/img/bg1Bottom.jpg) bottom center no-repeat;background-size: 100% auto;width: 100%;box-sizing: border-box;overflow: hidden;}
.redList{width: 100%;}
.redList ul{padding-bottom: 2rem;overflow: hidden;}
.redList li{margin: 0 .6rem;float: left;padding: 6rem .3rem 0 .4rem;text-indent: -1px;background: url(../assets/img/red2.png) center bottom no-repeat;background-size: auto 9.5rem;width: 8.05rem;height: 9.5rem;font-size: 1.2rem;color: #ea2929;text-align: center;box-sizing: border-box;}
.redList li.active{padding-top: 3.8rem;background: url(../assets/img/red3.png) center 0 no-repeat;background-size: auto 9.5rem;line-height: 1.05;}
.redList li.active p{padding-bottom: .6rem;}
</style>
